<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<view class="user book-bg tn-flex tn-flex-col-center">
				<view class="left">
					<image :src="user.game_img" mode=""></image>
				</view>
				<view class="right">
					<view class="name">{{user.nickname}}</view>
					<view class="price">
						<text class="p1">{{user.price}}</text>
						<text class="p2">海豚币</text>
						<text class="p3">/{{user.unit}}</text>
					</view>
				</view>
			</view>
			<view class="order-user book-bg">
				<view class="order-user-item">
					<text class="left">项目分类</text>
					<view class="right">
						<view class="value">{{user.game_name}}</view>
					</view>
				</view>
				<view class="order-user-item">
					<text class="left">服务类型</text>
					<view class="right">
						<view class="value">{{user.play_type_name}}</view>
					</view>
				</view>
				<view class="order-user-item">
					<text class="left">购买数量</text>
					<view class="right">
						<view class="stepper">
							<view class="t1" @click="minusClick">-</view>
							<text class="num">{{num}}</text>
							<view class="t1" @click="addClick">+</view>
						</view>
					</view>
				</view>
				<view class="order-user-item">
					<text class="left">单价</text>
					<view class="right">
						<view class="price">
							<text class="p1">{{user.price}}</text>
							<text class="p2">海豚币</text>
							<text class="p3">/{{user.unit}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="input book-bg">
				<view class="title">备注说明</view>
				<textarea class="textarea" v-model="remark" placeholder="请简单描述下您的服务需求" placeholder-class="pClass"></textarea>
			</view>
			<view class="xieyi" @click="gouxuan">
				<image src="/static/index/pitchon.png" v-if="xieyi" mode=""></image>
				<image src="/static/index/unselected.png" v-else mode=""></image>
				<text>本人已成年，已知晓禁止未成年人下单</text>
			</view>
			<view class="foot">
				<view class="price">
					<text class="p3">实付：</text>
					<text class="p1">{{setPrice}}</text>
					<text class="p2">海豚币</text>
				</view>
				<view class="btn" @click="submit">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xieyi: false,
				num: 1,
				id: '',
				mid:'',
				user: '',
				show:false,
				remark:''
			};
		},
		onLoad(option) {
			this.id = option.id
			if(option.mid){
				this.mid = option.mid
			}
			this.getUser()
		},
		computed:{
			setPrice(){
				return (this.user.price - 0) * this.num
			}
		},
		methods: {
			async getUser() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_index/load_order',
						data: {
							play_goods_id: this.id
						}
					})
					this.user = result.data.data
					this.show = true
				} catch (e) {
					this.msg(e.data.msg)
				}

			},
			async submit(){
				if(!this.xieyi) return this.msg('请勾选协议')

				try{
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/play_index/pay',
						data:{
							play_goods_id:this.id,
							num:this.num,
							remark:this.remark,
							play_mstching_id:this.mid
						}
					})
					this.msg(result.data.msg)
          // playcenterPage/my-Play-with

          setTimeout(()=> {
            uni.navigateTo({
              url: '/playcenterPage/my-Play-with'
            })
          },1000)
				}catch(e){
					this.msg(e.data.msg)
				}
			},
			gouxuan(){
				this.xieyi = !this.xieyi
			},
			minusClick() {
				if (this.num <= 1) return
				this.num--
			},
			addClick() {
				this.num++
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx 30rpx;

		.price {
			font-weight: bold;

			.p1 {
				color: #f3473d;
				font-size: 30rpx;
			}

			.p2 {
				color: #f3473d;
				font-size: 22rpx;
			}

			.p3 {
				color: #333333ad;
				font-size: 22rpx;
			}
		}

		.book-bg {
			background: #ffffff;
			border-radius: 12rpx;
			padding: 24rpx;
		}

		.user {
			height: 172rpx;

			.left {
				image {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
				}
			}

			.right {
				margin-left: 24rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 12rpx;
				}

			}
		}

		.order-user {
			margin-top: 24rpx;
			height: 312rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.order-user-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}

				.right {
					.value {
						font-size: 30rpx;
						font-weight: 400;
						color: #333333ad;
					}

					.stepper {
						display: flex;
						align-items: center;

						.t1 {
							width: 48rpx;
							height: 48rpx;
							border: 1px solid #FFB2F9;
							font-size: 32rpx;
							font-weight: 400;
							color: #333333;
							text-align: center;
							line-height: 48rpx;
						}

						.num {
							font-size: 32rpx;
							font-weight: 400;
							color: #333333;
							margin: 0 24rpx;
						}
					}
				}
			}
		}

		.input {
			margin-top: 24rpx;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				margin-bottom: 16rpx;
			}

			.pClass {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333ad;
			}
			.textarea{
				color: #333333;
			}

		}

		.xieyi {
			margin-top: 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 26rpx;
				height: 26rpx;
			}

			text {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				margin-left: 12rpx;
			}
		}

		.foot {
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			background-color: #ffffff;

			.price {
				.p3 {
					color: #333333;
					font-size: 24rpx;
				}

				.p1 {
					font-size: 40rpx;
				}
			}

			.btn {
				width: 176rpx;
				height: 70rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 80rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}
</style>
